/* 
1. 定义函数，直接用箭头函数，从而确定里面this指向的就是当前App
2. 只能绑定函数，不能直接调用，改完后就能传参
3. 修改 state 的唯一方法 setState，不要修改原来 state 的值，要使用新指覆盖旧指
*/

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  state = {
    count: 0,
  };

  // handleAdd = () => {
  //   // 修改 state 的唯一方法 setState
  //   // 不要修改原来 state 的值，要使用新指覆盖旧指
  //   this.setState({ count: this.state.count + 1 });
  // };
  // handleReduce = () => {
  //   // 修改 state 的唯一方法 setState
  //   // 不要修改原来 state 的值，要使用新指覆盖旧指
  //   this.setState({ count: this.state.count - 1 });
  // };
  handleClick = (num) => {
    this.setState({ count: this.state.count + num });
  };

  render() {
    return (
      <div>
        <p>当前数值为：{this.state.count}</p>
        <hr />
        {/* 只能绑定函数，不能直接调用 */}
        <button onClick={() => this.handleClick(1)}>+1</button>
        <span>{this.state.count}</span>
        <button onClick={() => this.handleClick(-1)}>-1</button>
      </div>
    );
  }
}

ReactDOM.render(<App></App>, document.getElementById('root'));
